import { mapGetters } from 'vuex'
import { isPc, isMobile, getViewport, getIP, getPlatform, isWxBrowser } from '@/utils'
import { initHanddrawBgmusic, playHanddrawBgmusic, pauseHanddrawBgmusic } from '@/utils/audio'

let folderName = 'app'
if(isPc()) {
  folderName = 'pc'
} else {
  folderName = 'app'
}

export default {
  components: {
    Loading: () => import('Comps/Loading/Handdraw'),
    Effect: () => import('Comps/Effect'),
    Menu: () => import('Comps/Handdraw/Menu'),
    MenuContents: () => import('Modal/MenuContents'),
    HandOption: () => import(`Modal/${folderName}/HandOption`),
    HanddrawView: () => import('Comps/Handdraw/HanddrawView'),
    CityIcon: () => import('Comps/Handdraw/CityIcon'),
    HanddrawInfo: () => import('Modal/HanddrawInfo'),
    IframeMap: () => import('Comps/Iframe/map'),
  },
  data() {
    return {
      isShowLoading: true,
      isShowPic: false,
      isShow: true,
      ovvId: null,
      audio: null,
      isMute: true,
    }
  },
  computed: {
    ...mapGetters(['handdrawData', 'loadInfo']),
    getLoadImage() {
      if (!this.loadInfo) return false
      if (this.loadInfo) {
        if (this.loadInfo.load_type == 1) {
          return true
        } else {
          if(isPc() && this.loadInfo.pc_load_img) {
            return this.loadInfo.pc_load_img
          }
          if(isMobile() && this.loadInfo.load_img) {
            return this.loadInfo.load_img
          }
        }
      }
      
    },
    getStartPic() {
      if (this.handdrawData && this.handdrawData.startpicurl) {
        let url = this.handdrawData.startpicurl.indexOf('|') != -1 ? this.handdrawData.startpicurl.split('|')[1] : this.handdrawData
          .startpicurl
        return $globalconfig.URLS.API + url
      }
    },
    getMusic() {
      if (this.handdrawData && this.handdrawData.bgmusicurl) {
        return this.handdrawData.full_bgmusic_url
      }
      return ''
    },
    getMusicName() {
      if (this.handdrawData && this.handdrawData.bgmusic_name) {
        return this.handdrawData.bgmusic_name
      }
      return ''
    },
    isShowEffect() {
      if(this.handdrawData) {
        return this.handdrawData.bgeffect
      }
    }
  },
  created() {
    this.ovvId = this.$route.params.id
  },
  mounted() {
    // 如果不是微信浏览器
    if (!isWxBrowser()) {
      setTimeout(() => {
        initHanddrawBgmusic(this.handdrawData.full_bgmusic_url)
      }, 3000)
    } else {
      // 初始化音频
      document.addEventListener('WeixinJSBridgeReady', () => {
        if (this.handdrawData) {
          initHanddrawBgmusic(this.handdrawData.full_bgmusic_url)
        } else {
          setTimeout(() => {
            initHanddrawBgmusic(this.handdrawData.full_bgmusic_url || '')
          }, 500)
        }
      },false)
    }

    // 发送用户数据
    setTimeout(() => {
      //实例化城市查询类
      var cityData
      var userData = {
        sw: getViewport().VW,
        sh: getViewport().VH,
        ip: getIP(),
        city: '',
        region: '',
        type: getPlatform() ? 1 : 2,
        overview_id: this.handdrawData ? this.handdrawData.overview_id : '',
        userid: this.handdrawData ? this.handdrawData.user_id : '',
        type_id: 1,
      }

      try {
        let citysearch = new AMap.CitySearch()

        //自动获取用户IP，返回当前城市
        citysearch.getLocalCity((status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            cityData = result
            userData.city = cityData ? cityData.city : ''
            userData.region = cityData ? cityData.province : ''
            this.$store.dispatch('sendCustomInfoHanddraw', userData)
          }
        })
      } catch (e) {
        this.$store.dispatch('sendCustomInfoHanddraw', userData)
      }
    }, 5000)
  },
  methods: {
    playMusic() {
      playHanddrawBgmusic()
    },
    pauseMusic() {
      pauseHanddrawBgmusic()
    },
    toggleMusic() {
      if (this.isMute) {
        pauseHanddrawBgmusic()
      } else {
        playHanddrawBgmusic()
      }
      this.isMute = !this.isMute
    },
    hideStartPic(isClick) {
      if(isClick) {
        this.isShowPic = false
        this.playMusic()
        return
      }
      let num = 3
      let timer
      const countdown = () => {
        timer = setTimeout(() => {
          if(num > 0) {
            num--
            countdown()
          } else {
            clearTimeout(timer)
            this.isShowPic = false
            this.playMusic()
          }
        }, 1000)
      }
      countdown()
    },
    closeLoading() {
      this.isShowLoading = false
      setTimeout(() => {
        this.isShowPic = true
        this.hideStartPic()
      }, 3000)
    },
  },
  beforeDestroy () {
    this.pauseMusic()
    this.audio = null
  }
}
